<template>
	<view class="iflex aic custom-radio" @click.stop="tapClick">
		<image v-if="modelValue === unselected" src="../../static/image/other/radio.png" class="custom-radio__icon"
			:style="imageStyle">
		</image>
		<image v-else src="../../static/image/other/radio.selected.png" class="custom-radio__icon" :style="imageStyle">
		</image>
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			// styleIsolation: 'shared'
		},
		// #endif
	})
</script>

<script lang="ts" setup>
	import { ref, defineProps, withDefaults, defineEmits, computed } from 'vue';
	const emit = defineEmits<{ 'update:modelValue' : [any] }>()
	const props = withDefaults(defineProps<{
		force ?: boolean;
		modelValue : any;
		selected ?: any;
		unselected ?: any;
		gap ?: string;
	}>(), {
		force: false,
		selected: true,
		unselected: false,
		gap: '8rpx'
	});

	const imageStyle = computed(() => {
		return { marginRight: props.gap }
	});

	function tapClick() {
		emit('update:modelValue', props.modelValue === props.selected ? props.unselected : props.selected);
	}
</script>

<style lang="scss">
	.custom-radio {
		&__icon {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>